<style scoped>
    ::v-deep .el-dialog__body {
        padding: 0 20px;
    }
</style>

<template>
    <el-dialog
            title="快速添加用户"
            :visible.sync="dialogVisible"
            :close-on-click-modal="false"
            width="550px">
        <el-form :model="model" label-width="80px" ref="editForm" v-loading="editLoading">
            <el-form-item label="姓名" prop="name" class="m-t-20" verify>
                <el-input v-model="model.name" maxlength="20" placeholder="请输入姓名或昵称"></el-input>
            </el-form-item>
            <el-form-item label="用户名" prop="username" :verify="verifyUserName">
                <el-input v-model="model.username" maxlength="20" placeholder="用户名只能由4-20位字母、数字组成"></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="password" :verify="verifyPassword">
                <el-input v-model="model.password" maxlength="32" placeholder="密码只能由4-20位字母、数字、下划线组成"></el-input>
            </el-form-item>
            <el-form-item label="确认密码" prop="confirmPassword" :verify="confirmPassword">
                <el-input v-model="model.confirmPassword" maxlength="32" placeholder="请再次输入密码"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false" :disabled="editLoading">取 消</el-button>
            <el-button type="primary" @click="save" :disabled="editLoading">确 定</el-button>
        </div>
    </el-dialog>
</template>

<script>
    /*
    该组件只要演示父子组件通信
    */
    let modelStr = JSON.stringify({
        id: null,
        name: null,
        username: null,
        password: null,
        confirmPassword: null,
    })
    export default {
        name: "quickAddUserDialog",
        data() {
            return {
                model: JSON.parse(modelStr),
                dialogVisible: false,
                editLoading:false,
            }
        },
        methods: {
            save() {
                this.$refs.editForm.validate((valid) => {
                    if (valid) {
                        this.editLoading = true
                        this.$apis.users.saveUser(this.model).then(r => {
                            this.editLoading = false;

                            // 如果不需要通知父组件的话可以直接弹出成功消息，并隐藏模态框即可。
                            //this.$msg.notify.success('用户添加成功')

                            // 通知父组件处理成功，successed是事件名，第二个参数是传递给父组件的数据，如果父组件不需要的话可以不传。
                            this.$emit('addSuccessed',this.model)
                            this.model = JSON.parse(modelStr) // 添加完了清空model数据
                            this.dialogVisible=false;
                        }).catch(e => {
                            this.editLoading = false;
                        })
                    }
                })
            },
            show(data) {
                this.model = data;
                this.$nextTick(() => {
                    this.$refs.editForm.clearValidate();
                })
                this.dialogVisible = true;
            },

            // 下面是element-ui-verify的自定义验证方法，像这种通用的用户密码密码确认密码的验证，建议查看文档扩展几个验证规则，只需要在el-form-item上写个属性就行了。

            verifyUserName(rule, val, callback) {
                // rule: 这个参数很恶心，不经常用到还要放在第一位，不过为了保持async-validator的风格，还是留着它了
                // val: 待校验值
                // callback: 校验结果回调 具体可以点击上文的"校验方法"链接查看
                if (!val || !window.consts.patterns.reg_uid.test(val))
                    callback(Error('用户名只能由4-20位字母、数字组成'))
                else callback()
            },
            verifyPassword(rule, val, callback) {
                if (!val || !window.consts.patterns.reg_pwd.test(val))
                    callback(Error('密码只能由6-32位字母、数字、下划线组成'))
                else callback()
            },
            confirmPassword(rule, val, callback) {
                if(!this.model.password || !window.consts.patterns.reg_pwd.test(this.model.password))
                    callback(Error('密码只能由6-32位字母、数字、下划线组成'))
                if (val !== this.model.password)
                    callback(Error('确认密码不一致'))
                callback()
            },
        }
    }
</script>


